<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>left-menu-expand</title>
	<meta name="viewport" content="width=device-width">
	<style>
		body {
			font-size: 14px;
			font-family: 'microsoft yahei';
			margin: 0;
			padding: 0;
			background:#607d8b;
		}

		#container {
			position: relative;
			overflow: hidden;
		}

		#menu {
			position: absolute;
			top: 0;
			left: -30%;
			width: 30%;
			height: 100%;
			background: #ff5722;
			z-index: 100;
			transition:all .6s;
		}
		
		#header {
			left: 0px;
			height: 50px;
			background:#03a9f4;
			line-height: 50px;
			font-size: 20px;
			color: #fff;
			font-weight: bold;
			transition:all .6s;
			position: relative;
		}

		#main {
			padding: 5px;
			transition:all .6s;
			position: relative;
			left: 0px;
		}

		.pics {
			width: 100%;
		}

		.pics img {
			width: 100%;
		}

	</style>

	<script>
		function initMenu() {
			var menuObj = document.querySelector("#menu");
			var h = document.documentElement.offsetHeight;
			console.log(window.clientHeight);
			menuObj.style.height = h + "px";
		}

		window.onload = function() {
			//console.log(window.height);
			var menuObj = document.querySelector("#menu");
			var mainObj = document.querySelector("#main");
			var headerObj = document.querySelector("#header");
			var h = document.documentElement.offsetHeight;
			menuObj.style.height = h + "px";

			document.querySelector("#btnExpand").onclick = function() {
				menuObj.style.left = "0";
				mainObj.style.left = "30%";
				headerObj.style.left = "30%";
				menuObj.setAttribute("isopen",true);
			}

			document.onclick = function(e) {
				// console.log(e.target);
				if(e.target.id != "menu" && e.target.id != "btnExpand") { 
					var isopen = menuObj.getAttribute("isopen");
					console.log("isopen %s", isopen);
					if(isopen) {
						menuObj.style.left = "-30%";
						mainObj.style.left = "0";
						headerObj.style.left = "0";
					}
					
				}
			}
		}
	</script>
</head>
<body>
	
	<div id="container">
		<div id="menu">
			我是Menu
		</div>
		<div id="header"><button id="btnExpand">展开</button>开发者头条</div>
		<div id="main">
			<div class="pics">
				<img src="bg.jpg" alt="">
			</div>
			<ul>
				<li>The ultimate aim is to expand the network further</li>
				<li>Centos7.2主要改进： sudo 可以验证命令校验和 提供 </li>
				<li>The ultimate aim is to expand the network further</li>
				<li>Centos7.2主要改进： sudo 可以验证命令校验和 提供 </li>
				<li>The ultimate aim is to expand the network further</li>
				<li>Centos7.2主要改进： sudo 可以验证命令校验和 提供 </li>
				<li>The ultimate aim is to expand the network further</li>
				<li>Centos7.2主要改进： sudo 可以验证命令校验和 提供 </li>
				<li>The ultimate aim is to expand the network further</li>
				<li>Centos7.2主要改进： sudo 可以验证命令校验和 提供 </li>
				<li>The ultimate aim is to expand the network further</li>
				<li>Centos7.2主要改进： sudo 可以验证命令校验和 提供 </li>
			</ul>
		</div>
	</div>
</body>
</html>